<template>
	<uni-card :is-shadow="false">
		<text class="uni-h1">QS5806蓝牙打印机</text>
	</uni-card>
	<uni-card :is-shadow="false">
		<uni-section title="状态" type="line" padding>
			<uni-card :is-shadow="false" is-full>
				<text class="uni-h6">{{viewState}}</text>
			</uni-card>

		</uni-section>
	</uni-card>
	<uni-card :is-shadow="false">
		<uni-section title="第一步" type="line" padding>
			<uni-easyinput v-model="deviceMac" placeholder="打印机MAC地址"></uni-easyinput>
			<button @click="connectBluetooth" type="primary" class="mt-1 mx-1">连接打印机蓝牙</button>

		</uni-section>
	</uni-card>
	<uni-card :is-shadow="false">
		<uni-section title="打印命令" type="line">
			<uni-title :title="cmdState"></uni-title>
			<uni-easyinput v-model="cmd" placeholder="输入要打印的命令16进制"></uni-easyinput>
			<view class="">
				<uni-title title="常用命令"></uni-title>
				<uni-list >
					<uni-list-item style="border: 1px solid #eee;margin-bottom: 30rpx;" >
						<template v-slot:header>
							当前选择：
								</template>
							<template v-slot:body>
								<view class="" >
									<picker @change="bindPickerChange" :value="index" :range="cmdPickerArr">
										<view class="uni-input">{{cmdPickerArr[index]}}</view>
									</picker>
								</view>
							</template>
						</uni-list-item>
					
				</uni-list>
				

			</view>
			<button @click="printByCmd" type="primary" class="mt-1 mx-1">发送命令给打印机</button>
		</uni-section>
	</uni-card>
	<uni-card :is-shadow="false">
		<uni-section title="打印文本" type="line">
			<uni-easyinput v-model="plainText" placeholder="输入要打印的文本"></uni-easyinput>
			<button @click="printText" type="primary" class="mt-1 mx-1">开始打印</button>
		</uni-section>
	</uni-card>
	<uni-card :is-shadow="false">
		<uni-section title="打印条码" type="line">
			<uni-easyinput v-model="barText" placeholder="输入要打印的条码字符串"></uni-easyinput>
			<image :src="base64Img" mode="widthFix"></image>
			<button @click="printBarText" type="primary" class="mt-1 mx-1">打印条码</button>
		</uni-section>
	</uni-card>
	<uni-card :is-shadow="false">
		<uni-section title="黑标: (专门为不干胶纸纸设置的)" type="line" padding>
			<text class="uni-h1">{{viewBMState}}</text>
			<uni-row class="">
				<uni-col :span="12">
					<button @click="openBlackMark" type="primary" class="mt-1 mx-1">打开黑标</button>
				</uni-col>
				<uni-col :span="12">
					<button @click="closeBlackMark" type="primary" class="mt-1 mx-1">关闭黑标</button>
				</uni-col>
			</uni-row>
			<uni-row class="mt-1">
				<uni-col>
					<uni-forms>
						<uni-forms-item label="黑标长度:mm" name="et_heigt">
							<uni-easyinput type="text" v-model="et_heigt" placeholder="黑标长度" />
						</uni-forms-item>
						<uni-forms-item label="黑标宽度:mm" name="et_wight">
							<uni-easyinput type="text" v-model="et_wight" placeholder="黑标宽度" />
						</uni-forms-item>
						<uni-forms-item name="et_position" label="起始位置:mm">
							<uni-easyinput type="text" v-model="et_position" placeholder="起始位置" />
						</uni-forms-item>
						<uni-forms-item name="et_voltage" label="黑标电压:mv">
							<uni-easyinput type="text" v-model="et_voltage" placeholder="黑标电压" />
						</uni-forms-item>
					</uni-forms>
				</uni-col>
			</uni-row>
			<uni-row class="">

				<uni-col :span="12">
					<button @click="updateBMark" type="primary" class="mt-1 mx-1">更新</button>
				</uni-col>
			</uni-row>


		</uni-section>
	</uni-card>
	<!-- <uni-card :is-shadow="false" ></uni-card> -->


</template>

<script>
	import cmdJson from './cmd.json'
	export default {
		data() {
			return {
				qsSdk: null,
				TAG: 'QsprinterModule',
				deviceMac: '86:67:7A:F5:23:CE',
				viewState: '空闲中...',
				viewBMState: '黑标状态：___',
				et_heigt: 58,
				et_wight: 58,
				et_position: 0,
				et_voltage: 1800,
				plainText: '',
				barText: '',
				base64Img: '',
				cmdArr: [],
				cmdPickerArr: [],
				cmd: '',
				index: 0,
				cmdState:'指令状态：____',
			}
		},
		onLoad() {
			this.cmdArr = cmdJson.cmdArray
			this.cmdPickerArr = Array.from(this.cmdArr.map(command => `${command.title}, ${command.description}`))
			console.log("cmdPickerArr", this.cmdPickerArr)
			this.qsSdk = uni.requireNativePlugin('Huo15-QsPrinter')
			//动态申请权限
			this.qsSdk.requestPermissions()
			//设备初始化
			this.qsSdk.init()
			//通知
			const globalEvent = uni.requireNativePlugin('globalEvent')
			globalEvent.addEventListener('huo15Notify', (e) => {
				this.log(JSON.stringify(e))
				if (e.view_state) {
					this.viewState = e.view_state
				}

				if (e.view_bm_state) {
					this.viewBMState = e.view_bm_state
				}
				if (e.base64_img_str) {
					this.base64Img = e.base64_img_str
				}
				if (e.cmd_state) {
					this.cmdState = e.cmd_state
				}
			})
		},
		methods: {
			log(msg) {
				console.log(this.TAG + ": ", msg)
			},
			radioChange(e) {
				this.log(e.detail.value)
				this.radioChoose = e.detail.value
			},
			connectBluetooth() {
				this.log('connectBluetooth')
				this.qsSdk.connectToDevice(this.deviceMac)
			},
			openBlackMark() {
				this.log('openBlackMark')
				this.qsSdk.openBlackMark();
			},
			closeBlackMark() {
				this.log('closeBlackMark')
				this.qsSdk.closeBlackMark();
			},
			updateBMark() {
				this.log('updateBMark')
				this.qsSdk.updateBMark({
					et_heigt: this.et_heigt + "",
					et_wight: this.et_wight + "",
					et_position: this.et_position + "",
					et_voltage: this.et_voltage + "",
				});
			},
			printText() {
				this.log('printText')
				this.qsSdk.printText({
					plainText: this.plainText
				})
			},
			printBarText() {
				this.log('printText')
				this.qsSdk.printBarText({
					barText: this.barText,
					barHeight:162,//条码高度，条码高度为n点（1 ≤ n ≤ 255，n默认为162）
					textPos:0,//字符打印位置：0不打印，1条码上方，2条码下方，3条码上下方都打印
					alignType:0,//条码对齐方式：0左对齐，1中间对齐，2右对齐
				})
			},
			printByCmd(){
				this.log('printByCmd')
				this.qsSdk.printByCmd({
					cmd: this.cmd
				})
			},
			bindPickerChange(e) {
				console.log('picker发送选择改变，携带值为', e.detail.value)
				this.index = e.detail.value
				this.cmd = this.cmdArr[this.index].description
			},

		}
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: #eee;
	}

	.mt-1 {
		margin-top: 10rpx;
	}

	.mx-1 {
		margin-left: 10rpx;
		margin-right: 10rpx;
	}
</style>